<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .cls {
    width: 200;
    height: 300;
    background-color: aqua;
  }
</style>

<body>
  <div id="app">
    <h1>v-bind:href="web.url"</h1>
    <a v-bind:href="web.url">666</a>
    <h1>简写:href="web.url"</h1>
    <a :href="web.url">666</a>
    <h1>v-bind:src="web.img"</h1>
    <img v-bind:src="web.img" alt="">
    <h1>v-bind:value="web.msg"</h1>
    <input type="text" v-bind:value="web.msg">
    <h1>v-bind:class="{cls:web.fontStatus}"</h1>
    <!-- 判断web.fontStatus是否为true，如果是就显示class类否则不显示
    在做判断的时候才加上{}，直接赋值不加{} -->
    <p v-bind:class="{cls:web.fontStatus}">123</p>
  </div>

  <script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    createApp({
      setup() {
        const web = reactive({
          url: 'http://www.baidu.com',
          msg: '你干嘛哎呦！',
          img: 'img1.png',
          fontStatus: true
        })
        return {
          web
        }
      }
    }).mount('#app')
  </script>
</body>

</html>